<template>
	<div class="MaterielInfo">
		<LeftRightContraction :left-width="250" backgroundColor="#fff">
			<div slot="left">
				<el-card class="box-card" :body-style="{padding:'10px 15px'}" shadow="hover">
					<div slot="header">
						<div class="lz-header-bt">
							<span class="el-icon-s-custom">{{$route.meta.title}}</span>
						</div>
					</div>
					<div class="left-center">
						<el-tree :data="tree.list" show-checkbox :props="tree.defaultProps" @check="checkChange"></el-tree>
					</div>
				</el-card>
			</div>
			<div slot="right">
				<!-- 我是右边 -->
				<el-card class="box-card" :body-style="{padding:'10px 15px'}" shadow="hover">
					<div slot="header">
						<span class="el-icon-s-custom">{{$route.meta.title}}</span>
						<el-divider direction="vertical"></el-divider>
					</div>
					<div>
						<materiel-list ref="materielList"></materiel-list>
					</div>
				</el-card>
			</div>
		</LeftRightContraction>
		
		
	</div>
</template>
<script>
	let that
	import {
		mapGetters
	} from 'vuex'
	import LeftRightContraction from '@/components/LeftRightContraction'
	import materielList from './components/materielList'
	export default {
		computed:{
			...mapGetters(['api', 'buttonPermissions','size']),
		},
		components:{
			LeftRightContraction,
			materielList
		},
		name: 'MaterielInfo',
		data(){
			return{
				tree:{
					list:[],
					defaultProps: {
						children: 'children',
						label: 'catalogName'
					},
					page:{
						pageNum:1,
						pageSize:10,
					}
				},
			}
		},
		mounted() {
			that = this
			//获取商品分类
			that.materialCatalog_list()
		},
		methods: {
			//获取商品分类
			materialCatalog_list(){
				that.GLOBAL.doGet(that.api.GLOBAL_setting_materialCatalog_list, {}).then((res) => {
					if (res.code == 200&&res.result) {
						that.tree.list=res.result
					}else{
						that.tree.list=[]
					}
				})
			},
			checkChange(node,data){
				let arr=data.checkedNodes
				arr=arr.map(res=>res.id)
				that.$refs.materielList.checkChange(arr)
			},
			//按钮操作
			clickBtnType(text, event) {
				that.$refs.menuList.clickBtnType(text)
			},
		}
		
	}
</script>
<style scoped="scoped" lang="scss">
	.MaterielInfo{
		height: 100%;background-color: #FFFFFF;
	}
</style>
